<template>
    <div class="room-item">
        <!-- 包裹一个item-inner盒子确定边距 -->
        <div class="item-inner">
            <div class="cover">
                <img :src="roomitemdata.picture_url" alt="">
            </div>
            <div class="info">
                <div class="title" :style="{ color: titleColor }">
                    {{ titleText }}
                </div>
                <div class="name">
                    {{ roomitemdata.name }}
                </div>
                <div class="price">
                    {{ roomitemdata.price_format + "/晚" }}
                </div>
                <div class="bottom-info" :style="bottominfo.style">
                    {{ bottominfo.content }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from '@vue/reactivity';

// 1.定义pros
const props = defineProps({
    roomitemdata: {
        type: Object,
        default: () => ({})
    }
})
// 2.定义计算属性
const titleText = computed(() => {
    return props.roomitemdata.verfy_info.message.join(" ")
})
const titleColor = computed(() => {
    return props.roomitemdata.verfy_info.text_color
})
// 计算属性建议对象写法
const bottominfo = computed(() => {
    return {
        content: props.roomitemdata.bottom_info.content,
        style: {
            color: props.roomitemdata.bottom_info.content_color,
            fontsize: props.roomitemdata.bottom_info.font_size
        }
    }
})
</script>
<style scoped lang="less">
.room-item {
    width: 33.333333%;

    .item-inner {
        // 上边|左边右边|下边
        margin: 0 8px 12px;
        color: #484848;
        font-weight: 800;
    }

    img {
        width: 100%;
        border-radius: 5px;
    }

    .info {
        .title {
            margin-top: 8px;
            font-size: 12px;
        }

        .name {
            margin-top: 3px;
            font-size: 16px;
            // 处理内容溢出加省略号
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price {
            // 上边下边|左边右边
            margin: 3px 0;
            font-size: 14px;
            font-weight: 400;
        }
    }
}
</style>
